<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top mar-bott20">
			<el-button type="primary" @click.stop="back" size="small">返回会员卡列表</el-button>
		</div>
		<div class="yh_topsearch">
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡类型</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in typeoflist" @click.stop="listClick(1,index)" :key="index" class="sons"
						:class="search.typeofid === item.id ? 'choiceme' : ''">
						{{ item.title }}({{ item.num }})
					</div>
				</div>
			</div>

			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡种类</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in cardnamelist" @click.stop="listClick(2,index)" :key="index"
						class="sons" :class="search.cardnameid === item.id ? 'choiceme' : ''">
						{{ item.title }}({{ item.num }})
					</div>
				</div>
			</div>

			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡状态</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in cardstatuslist" @click.stop="listClick(3,index)" :key="index"
						class="sons" :class="search.cardstatusid === item.id ? 'choiceme' : ''">
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis" style="margin-top: 10px">
					<div>
						<span class="demonstration yh_qs yh_font13">发卡时间</span><br>
						<el-date-picker v-model="search.birthday_start" style="width: 120px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 120px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" @click.stop="getList" class="mar-top20" size="small">搜索</el-button>
					</div>
				</div>
			</div>
		</div>
		<el-form class="mar-top20" ref="ruleForm" :model="ruleForm" :rules="rules">
			<div class="demonstration yh_qs yh_font13">操作类型</div>
			<div class="wid100 dis disAl mar-top5" style="background: #f2f2f2;min-height: 42px;padding: 5px 15px;">
				<div class="mar-right10">批量操作</div>
				<el-select v-model="ruleForm.yan" size="small" style="width: 80px;height: 34px;">
					<el-option v-for="(item,index) in yanList" :key="index" :label="item.label"
						:value="item.value" />
				</el-select>
				<div class="mar-left20 mar-right10">有效期</div>
				<el-form-item class="mp0" prop="youxiao">
					<el-input v-model="ruleForm.youxiao" style="width: 140px;" size="small" />
				</el-form-item>
				<div class="mar-left10">天</div>
			</div>
		</el-form>
		<div class="wid100 dis disAl disJuC coFFF" style="padding: 20px 0 40px">
			<div class="mar-right20 que cuPo" style="background: #48a9f3;" @click.stop="submitForm('ruleForm')">确认</div>
			<div class="que cuPo" style="background: #616b74;" @click.stop="back()">取消</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,cardList
	} from '@/api/member'
	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		data() {
			const youxiaoVal = (rule, value, callback) => {
				if(Number(value) === 0){
					callback()
				}else if (!parseFloat(value) || value % 1 !== 0 || value < 0) {
					callback(new Error('请输入整数'))
				} else {
					callback()
				}
			}
			return {
				shuaVisible: false,
				ruleForm: {
					yan: 0,
					youxiao: null,
				},
				rules: {
					youxiao: [{
						required: true,
						trigger: 'change',
						validator: youxiaoVal
					}],
				},
				yanList: [{
					value: 0,
					label: '延长'
				}, {
					value: 1,
					label: '减少'
				}],
				isPopover: false,
				list: null,
				total: 0,
				listLoading: false,
				cardstatuslist: [],
				cardnamelist: [],
				cardtypelist: [],
				typeoflist: [],
				search: {
					cardtypeid: 100,
					typeofid: 100,
					cardnameid: 0,
					cardstatusid: 0,
					birthday_start: '', // 发卡开始时间
					birthday_end: '', // 发卡结束时间
					validity_start: '', // 有效期开始时间
					validity_end: '', // 有效期结束时间
					source: [{
						value: 0,
						label: '不指定'
					}, {
						value: 1,
						label: '本馆发的卡'
					}, {
						value: 2,
						label: '本馆发的非通用卡'
					}], // 会员卡来源
					source_id: 0,
					balance: [{
						value: 0,
						label: '不指定'
					}, {
						value: 1,
						label: '余额为零'
					}, {
						value: 2,
						label: '余额不为零'
					}], // 余额
					balance_id: 0,
					name: null,
				},
				tableData: [],
				listQuery: {
					page: 1,
					limit: 0
				},
				multipleSelection: []
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '会员卡批量操作',
				url: '/member/memberCardsExpireUpdate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSousuoList()
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.back()
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			getSousuoList() {
				searchSousuo().then(response => {
					const {
						data
					} = response
					this.cardtypelist = data.type
					this.typeoflist = data.types
					this.cardnamelist = data.cardlist
					this.cardstatuslist = data.statuslist
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			listClick(type, index) {
				switch (type) {
					case 0:
						this.search.cardtypeid = index
						break
					case 1:
						this.search.typeofid = index
						break
					case 2:
						this.search.cardnameid = index
						break
					case 3:
						this.search.cardstatusid = index
						break
				}
				this.getList()
			},
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'keyword': this.search.name,
					// 'birthday_start': this.search.birthday_start,
					// 'birthday_end': this.search.birthday_end,
					'cards_period_start': this.search.validity_start,
					'cards_period_end': this.search.validity_end,
					// '': this.search.source_id,
					'balance': this.search.balance_id,
					'type': this.search.cardtypeid,
					'types': this.search.typeofid,
					'cardid': this.search.cardnameid,
					'cardstate': this.search.cardstatusid,
					'sort': this.sort
				}
				cardList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
		}
	}
</script>

<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		top: 0px !important;
		border-bottom-color: #84878d !important;
	}
</style>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}
	
	.btn-group_top {
	    text-align: right;
	}
</style>